<template>
  <div class="draw">
    <div class="main">
      <div class="common">
        <div class="common-input">
          <el-select v-model="commonStateValue" placeholder="请选择奖品类型" clearable>
            <el-option v-for="item in commonStateOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div class="common-button" @click="searchHit">搜索</div>
        <div class="common-button" @click="replacementHit" style="background: #999999;">重置</div>
        <div class="common-button" style="background: #2A82E4;" @click="editHit(0)">
          新增
        </div>
      </div>

      <div class="reminder">
        <div class="left">
          最多设置8个奖项，谢谢参与中奖概率
          <el-input style="width: 100px" v-model="commonValue" placeholder="谢谢参与中奖概率" clearable></el-input>%
        </div>
      </div>

      <div class="table" v-loading="loading">
        <el-table :data="tableData" border :header-cell-style="{
          color: '#333333',
          backgroundColor: '#f3f3f3',
        }">
          <el-table-column label="奖品图片">
            <template slot-scope="scope">
              <img class="imgs" :src="scope.row.welfareLuckyIcon" alt="" />
            </template>
          </el-table-column>
          <el-table-column prop="welfareLuckyName" label="奖品名称">
          </el-table-column>
          <el-table-column label="奖品类型">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.welfareLuckyType == 0">积分</el-tag>
              <el-tag v-if="scope.row.welfareLuckyType == 1" type="warning">实物</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="welfareLuckyIntegral" label="奖品积分">
          </el-table-column>
          <el-table-column prop="welfareLuckyRate" label="中奖概率（%）">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <div class="operation">
                <div class="list" @click.prevent="editHit(1, scope.row)">
                  编辑
                </div>

                <div class="list" @click.prevent="deleteHit(scope.row)">
                  删除
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
            layout="prev, pager, next" :total="tableDataTotal" :current-page="page">
          </el-pagination>
        </div>
      </div>
    </div>

    <!--新增或者编辑-->
    <div class="add">
      <el-dialog :title="addRoaid == 0 ? '新增' : '编辑'" :visible.sync="addVisible" :before-close="addClose" width="30%">
        <div class="add-form">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="奖品图片" prop="icon">
              <el-upload action="https://api-qingchuang.xmw1688.com/common/upload" :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <div class="img">
                  <img v-if="ruleForm.icon" :src="ruleForm.icon" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </div>
              </el-upload>
            </el-form-item>

            <el-form-item label="奖品类型" prop="type">
              <el-select v-model="ruleForm.type" placeholder="请选择奖品类型" clearable>
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="奖品名称" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入奖品名称" clearable></el-input>
            </el-form-item>

            <el-form-item label="奖品积分" prop="integral">
              <el-input v-model="ruleForm.integral" placeholder="请输入奖品名称" clearable></el-input>
            </el-form-item>

            <el-form-item label="中奖概率（%）" prop="probability">
              <el-input v-model="ruleForm.probability" placeholder="请输入中奖概率" clearable></el-input>
            </el-form-item>

            <el-form-item class="attachment">
              <div class="list" @click="addClose">取消</div>
              <div class="list" @click="addConfirm('ruleForm')">保存</div>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <!--处理弹出框-->
    <div class="delete">
      <el-dialog title="删除" :visible.sync="deleteVisible" :before-close="deleteClose">
        <div class="delete-title">是否确认删除？</div>
        <div class="delete-attachment">
          <div class="list" @click="deleteClose">取消</div>
          <div class="list" @click="deleteConfirm">确定</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  welfareLuckyList,
  welfareLuckyListId,
  welfareLuckyListAdd,
  welfareLuckyListDelete,
} from "@/api/welfare";

var throttle = require("@/utils/throttle"); // 防抖

export default {
  data() {
    return {
      commonValue: "",
      commonStateValue: "",
      commonStateOptions: [
        {
          value: 0,
          label: "积分",
        },
        {
          value: 1,
          label: "实物",
        },
      ],
      //--------------------------
      page: 1,
      limit: 10,
      tableData: [],
      tableDataTotal: 0,
      tableObj: {},
      loading: false,
      commonObj: {},
      //-----
      addRoaid: 0,
      addVisible: false,
      ruleForm: {
        icon: "",
        name: "",
        probability: "",
        type: "",
        //--------
        integral: "",
      },
      rules: {
        icon: [{ required: true, message: "上传奖品图片", trigger: "blur" }],
        name: [
          { required: true, message: "请输入奖品名称", trigger: "blur" },
          { max: 6, message: "输入奖品名称最多不能超过6位", trigger: "blur" },
        ],
        integral: [
          { required: true, message: "请输入奖品积分", trigger: "blur" },
        ],
        probability: [
          { required: true, message: "请输入中奖概率", trigger: "blur" },
        ],
        type: [{ required: true, message: "请输入中奖概率", trigger: "blur" }],
      },
      typeOptions: [
        {
          value: "0",
          label: "积分",
        },
        {
          value: "1",
          label: "实物",
        },
      ],
      //-------
      deleteVisible: false,
    };
  },

  created() {
    this.welfareLuckyListMet();
  },

  methods: {
    welfareLuckyListMet() {
      let params = {
        welfareLuckyType: this.commonStateValue,
      };

      welfareLuckyList(params).then((res) => {
        if (res.errorCode == null) {
          res.resultData.luckyList.forEach((item, index) => {
            item.welfareLuckyRate = Number(item.welfareLuckyRate / 10000);
          });

          this.commonValue = res.resultData.welfareLuckyThankRate;
          this.tableData = res.resultData.luckyList;
          this.tableDataTotal = res.resultData.totalNum;
          this.loading = false;
        }
      });
    },
    //----------------------------
    editHit(index, item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }

      if (index == 1) {
        this.commonObj = item;
        this.ruleForm.icon = item.welfareLuckyIcon;
        this.ruleForm.type = item.welfareLuckyType + "";

        this.ruleForm.probability = item.welfareLuckyRate;
        this.ruleForm.integral = item.welfareLuckyIntegral;

        this.ruleForm.name = item.welfareLuckyName;
      } else {
        this.commonObj = {};

        this.ruleForm.icon = "";
        this.ruleForm.type = "";
        this.ruleForm.probability = "";
        this.ruleForm.integral = "";
        this.ruleForm.name = "";
      }

      this.addRoaid = index;
      this.addVisible = true;
    },
    addClose() {
      this.commonObj = {};

      this.ruleForm.icon = "";
      this.ruleForm.type = "";
      this.ruleForm.probability = "";
      this.ruleForm.integral = "";
      this.ruleForm.name = "";

      this.addVisible = false;
    },
    addConfirm: throttle.throttle(function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            welfareLuckyId: this.commonObj.welfareLuckyId,
            welfareLuckyIcon: this.ruleForm.icon,
            welfareLuckyType: this.ruleForm.type,
            welfareLuckyName: this.ruleForm.name,
            welfareLuckyIntegral: this.ruleForm.integral,
            welfareLuckyRate: Number(this.ruleForm.probability * 10000),
          };

          welfareLuckyListAdd(params).then((res) => {
            if (res.errorCode == null) {
              if (this.addRoaid == 0) {
                this.$message.success("新增成功！");
              } else {
                this.$message.success("修改成功！");
              }
              this.addVisible = false;
              this.loading = true;
              this.welfareLuckyListMet();
            }
          });
        } else {
          return false;
        }
      });
    }, 3000),
    //--------------
    searchHit() {
      this.loading = true;
      this.welfareLuckyListMet();
    },
    replacementHit() {
      this.commonStateValue = "";

      this.loading = true;
      this.welfareLuckyListMet();
    },
    //---------上传
    handleAvatarSuccess(res, file) {
      this.ruleForm.icon = res.resultData;
    },
    //---------
    deleteHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.commonObj = item;
      this.deleteVisible = true;
    },
    deleteClose() {
      this.deleteVisible = false;
    },
    deleteConfirm() {
      let params = this.commonObj.welfareLuckyId;

      welfareLuckyListDelete(params).then((res) => {
        if (res.errorCode == null) {
          this.deleteVisible = false;
          this.$message.success("删除成功！");
          this.loading = true;
          this.welfareLuckyListMet();
        }
      });
    },
    //-------------------------------------------------
    handleSizeChange(val) {
      this.limit = val;
      this.loading = true;
      this.welfareLuckyListMet();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loading = true;
      this.welfareLuckyListMet();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/delete.less");

.draw {
  .main {
    .reminder {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;

        /deep/ .el-input {
          width: 300px;
          margin: 0 10px;
        }
      }

      .right {
        padding: 9px 20px;
        box-sizing: border-box;
        border-radius: 5px;
        background: #2a82e4;
        font-size: 14px;
        color: #fff;
        margin-left: 20px;
        cursor: pointer;
      }
    }

    .table {
      margin-top: 10px;
    }
  }

  .add {
    /deep/ .el-dialog__header {
      font-size: 16px;
      text-align: center;
    }

    /deep/ .el-dialog__body {
      padding-bottom: 10px;
    }

    .add-form {
      /deep/ .el-select {
        width: 100%;
      }

      .img {
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ccc;
        border-radius: 5px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
      }

      .attachment {
        margin-top: 50px;

        /deep/ .el-form-item {
          margin-bottom: 0;
        }

        /deep/ .el-form-item__content {
          margin-left: 0 !important;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .list {
          background: #3da8f5;
          color: #fff;
          font-size: 16px;
          margin-right: 50px;
          border-radius: 5px;
          width: 100px;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        .list:first-child {
          background: #808080;
        }

        .list:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>